import React, { Component } from 'react';
import '../styles/Myfenlei.scss'
import pic from '../assets/02-分类页-Tab切换_03.gif'
import pic1 from '../assets/02-分类页-Tab切换_05.gif'
import pic2 from '../assets/02-分类页-Tab切换_07.gif'
import pic3 from '../assets/02-分类页-Tab切换_12.gif'
import pic4 from '../assets/02-分类页-Tab切换_13.gif'
import pic5 from '../assets/02-分类页-Tab切换_14.gif'

class Myfenlei extends Component {
    constructor(props){
        super(props);
        this.state = {
            currentIndex:0,
            catelist:[ 
                { 
                    name:'活动专区',
                    list2:[ 
                        { 
                            name:'专区活动', 
                            list3:[ 
                                { pic,name:'密码' },{ pic:pic1,name:'乳液' },
                                { pic:pic2,name:'精华' },{ pic:pic3,name:'面霜' },
                            ] 
                        },
                        
                        { 
                            name:'特价活动', 
                            list3:[
                                { pic:pic4,name:'护手霜' },{ pic:pic5,name:'手摸' },
                                { pic,name:'精华' },{ pic,name:'面霜' },
                            ] 
                        }
                    ] 
                },
                { 
                    name:'品牌',
                    list2:[ 
                        { 
                            name:'大牌', 
                            list3:[ 
                                { pic,name:'卸妆' },{ pic,name:'乳液' },
                                { pic,name:'精华' },{ pic,name:'面霜' },
                            ] 
                        },
                        
                        { 
                            name:'小牌', 
                            list3:[
                                { pic,name:'护手霜' },{ pic,name:'手摸' },
                                { pic,name:'精华' },{ pic,name:'面霜' },
                            ] 
                        }
                    ] 
                },
                { 
                    name:'美容护肤',
                    list2:[ 
                        { 
                            name:'面部护理', 
                            list3:[ 
                                { pic,name:'卸妆' },{ pic,name:'乳液' },
                                { pic,name:'精华' },{ pic,name:'面霜' },
                            ] 
                        },
                        
                        { 
                            name:'手部护理', 
                            list3:[
                                { pic,name:'护手霜' },{ pic,name:'手摸' },
                                { pic,name:'精华' },{ pic,name:'面霜' },
                            ] 
                        }
                    ] 
                },
                { 
                    name:'彩妆',
                    list2:[ 
                        { 
                            name:'美丽彩妆', 
                            list3:[ 
                                { pic,name:'卸妆' },{ pic,name:'乳液' },
                                { pic,name:'精华' },{ pic,name:'面霜' },
                            ] 
                        },
                        { 
                            name:'流行彩妆', 
                            list3:[
                                { pic,name:'护手霜' },{ pic,name:'手摸' },
                                { pic,name:'精华' },{ pic,name:'面霜' },
                            ] 
                        }
                    ] 
                },
                { 
                    name:'香水',
                    list2:[
                        { 
                            name:'男士香水', 
                            list3:[
                                { pic,name:'古龙' },{ pic,name:'大宝' },
                                { pic,name:'青蛙王子' },{ pic,name:'精品香水' },
                            ] 
                        },
                        { 
                            name:'女士香水', 
                            list3:[
                                { pic,name:'香奈儿' },{ pic,name:'欧莱雅' },
                                { pic,name:'纪梵希' },{ pic,name:'精品香水' },
                            ] 
                        }
                    ] 
                }
            ]
        }
    }
    handleClick( index ){
        this.setState({currentIndex:index});
    }
    render() {
        return (
            <div className='fenlei'>
                <div className="left">
                    {
                        this.state.catelist.map((item,index)=>{
                            return (
                                <div className='lei1'>
                                    <div onClick={()=>{ this.handleClick( index ) }} className={ 'name ' + (this.state.currentIndex == index ? 'active' : '') } key={index}>{item.name}</div>
                                </div>
                            )
                        })
                    }
                </div>

                <div className="right">
                    {
                        
                        this.state.catelist[this.state.currentIndex].list2.map((item2,index)=>{
                            return (
                                <div className="list2" key={index}>
                                    <h3> {item2.name} </h3>
                                    <div className="list3">
                                        {
                                            item2.list3.map((item3,index)=>{
                                                return (
                                                    <div className="item3" key={index}>
                                                        <img src={item3.pic} alt="" />
                                                        <div className="name">{item3.name}</div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Myfenlei;